<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品列表</title>
    <script src="../js/ajax.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .w{
            width:1280px;
            margin:20px auto;
        }
        a{
            color:inherit;
            text-decoration: none;
        }
        .good{
            text-align: center;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color:inherit;
        }
        img{

        }
        .list{
            width:1200px;
            padding:20px;
            box-sizing:border-box;
            margin:50px auto 0;
            overflow: hidden;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

        }
        .list li {
            /* width:220px; */
            text-align: center;
            padding:10px;
            font-size: 14px;
            box-sizing: border-box;
            width: -webkit-calc(100%/5);
            width:20%;
            cursor: pointer;
        }
        .list li img{
            width:100%;
            transition: 1s all;
            height:212px;
        }
        .info{
            font-size: 16px;
            line-height: 24px;
            /* 多行文本溢出隐藏 */
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
            transition: 1s all;
            
        }
        .price{
            font-family: 'JDZH-Regular', sans-serif;
            display: inline-block;
            color: #f02b2b;
            margin-top: 5px;
            margin-right: 5px;
            font-size: 16px;
        }

        .list li:hover{
            box-shadow:  0 0 4px 2px rgba(0, 0, 0, 0.5);
        }

        .list li:hover img{
            /* width:106%;
            height:220px; */
        }
        .form{
            width:1100px;
            margin:10px auto;
            display: flex;
            justify-content: center;
        }
        .orderBox{
            display: flex;
            margin:0 15px;
        }
        .orderColBox{
            display: flex;
            margin:0 15px;
            border:1px dotted plum;
        }
        .orderTypeBox{
            display: flex;
            margin:0 15px;
            border:1px dotted plum;
        }
    </style>
</head>
<body>
    
    <div class="good w" >
        <h3>欢迎来到千锋在线商城</h3>
        <div class="wrapper ">
            <div class="form-box">
                <form onsubmit="return false" class="form">
                    <div class="searchbox">
                        <input type="text" placeholder="请输入搜索关键字" class="searchInp">
                        <button class="searchBtn">搜索</button>
                    </div>
                    <div class="orderBox">
                        <div class="orderColBox">
                            <label for="">编号
                                <input type="radio" checked="" name="orderCol" class="orderCol" value="id" >
                            </label>
                            <label for="">名称
                                <input type="radio"  name="orderCol" class="orderCol" value="goodsName" >
                            </label>
                            <label for="">价格
                                <input type="radio" name="orderCol" class="orderCol" value="goodsPrice" >
                            </label>
                        </div>
                        <div class="orderTypeBox">
                            <label for="">升序
                                <input type="radio" checked="" name="orderType" class="orderType" value="asc" >
                            </label>
                            <label for="">降序
                                <input type="radio"  name="orderType" class="orderType" value="desc" >
                            </label>
                        </div>
                        <div class="showNumBox">
                            <select class="seelct">
                                <option value="10" selected="">每页显示10条</option>
                                <option value="20" >每页显示20条</option>
                                <option value="40" >每页显示40条</option>
                                <option value="60" >每页显示60条</option>
                            </select>
                        </div>
                    </div>
                    <input type="reset" onclick="resetdata()" class="resetBtn" value="重置">
                </form>
            </div>
            <ul class="good-box list">
                <!-- <li>
                    <a href="">
                        <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg" alt="">
                    </a>
                    <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
                    <p class="price"   >
                        ￥<span>5988.00</span>
                    </p>
                </li>
                -->
            </ul>
        </div>
    </div>

    <!-- 
        商品列表 - 商品详情 - 购物车 
     -->

     <script>
        // 排序
        // 搜索
        // 分页 

        var goodbox = document.getElementsByClassName('good-box')[0];
        var searchBtn = document.getElementsByClassName('searchBtn')[0];
        // var searchInp  = document.getElementsByClassName("searchInp")[0];
        var form = document.getElementsByClassName("form")[0];


        // 提前声明全局变量  改了谁 就搜索谁 全局统一的 
        var key = ""   // 全局变量 搜索关键字
        var orderCol = "id"  // 全局变量 默认的排序字段 
        var orderType = "asc"  // 全局变量 默认的排序类型  asc 升序  desc 降序  
        var pageIndex = 1  // 全局变量 默认的第几页 1
        var pageNum = 10   //  全局变量 每页显示的多少条 
        // 重置数据 
        function resetdata(){
            loadallgood()
        }
        // 合并所有的搜索条件 
        form.onclick = function(e){
            var e = e || window.event;
            var target = e.target || e.srcElement;
            // 模糊 搜索
            if(target.className=="searchBtn"){
                var searchInp = target.previousElementSibling;  // 查询兄弟元素 
                key = searchInp.value;
                console.log(key)
                $.get({
                    url:"../good/04_searchGoodsByOrder.php",
                    dataType:"json",
                    data:{      // 搜索出来的数据也是以Id 排序 
                        key,
                        orderCol,
                        orderType
                    },
                    success:res=>{
                        // 循环数据 
                        // 渲染数据
                        var { status,detail,result } =  res;
                        if(status){
                            var html = "";
                            result.forEach((item,index)=>{
                                var {id,goodsId ,goodsName,goodsImg , goodsPrice} = item;
                                html+= `<li>
                            <a href="">
                                <img src="${goodsImg}" alt="">
                            </a>
                            <p class="info">${goodsName}</p>
                            <p class="price"   >
                                ￥<span>${goodsPrice}</span>
                            </p>
                        </li> `;
                            })
                            goodbox.innerHTML = html;
                        }else{
                            goodbox.innerHTML = "暂无商品"
                        }
                    }
                })
            }else if(target.className=='orderCol'){
                orderCol = target.value;
                console.log(orderCol)
                $.get({
                    url:"../good/04_searchGoodsByOrder.php",
                    dataType:"json",
                    data:{      // 搜索出来的数据也是以Id 排序 
                        key,
                        orderCol,
                        orderType
                    },
                    success:res=>{
                        // 循环数据 
                        // 渲染数据
                        var { status,detail,result } =  res;
                        if(status){
                            var html = "";
                            result.forEach((item,index)=>{
                                var {id,goodsId ,goodsName,goodsImg , goodsPrice} = item;
                                html+= `<li>
                            <a href="">
                                <img src="${goodsImg}" alt="">
                            </a>
                            <p class="info">${goodsName}</p>
                            <p class="price"   >
                                ￥<span>${goodsPrice}</span>
                            </p>
                        </li> `;
                            })
                            goodbox.innerHTML = html;
                        }else{
                            goodbox.innerHTML = "暂无商品"
                        }
                    }
                })
            }else if(target.className=='orderType'){ 
                // 排序类型改变 
                orderType = target.value;
                console.log(orderType)
                $.get({
                    url:"../good/04_searchGoodsByOrder.php",
                    dataType:"json",
                    data:{      // 搜索出来的数据也是以Id 排序 
                        key,
                        orderCol,
                        orderType
                    },
                    success:res=>{
                        // 循环数据 
                        // 渲染数据
                        var { status,detail,result } =  res;
                        if(status){
                            var html = "";
                            result.forEach((item,index)=>{
                                var {id,goodsId ,goodsName,goodsImg , goodsPrice} = item;
                                html+= `<li>
                            <a href="">
                                <img src="${goodsImg}" alt="">
                            </a>
                            <p class="info">${goodsName}</p>
                            <p class="price"   >
                                ￥<span>${goodsPrice}</span>
                            </p>
                        </li> `;
                            })
                            goodbox.innerHTML = html;
                        }else{
                            goodbox.innerHTML = "暂无商品"
                        }
                    }
                })
            }
        }


        //  初始化请求商品数据 
        function loadallgood(){
            $.get({
                url:"../good/01_searchAllGoods.php",
                dataType:"json",
                success:res=>{
                    console.log(res);
                    // 循环数据 
                    // 渲染数据
                    var { status,detail,result } =  res;
                    if(status){
                        var html = "";
                        result.forEach((item,index)=>{
                            var {id,goodsId ,goodsName,goodsImg , goodsPrice} = item;
                            html+= `<li>
                        <a href="">
                            <img src="${goodsImg}" alt="">
                        </a>
                        <p class="info">${goodsName}</p>
                        <p class="price"   >
                            ￥<span>${goodsPrice}</span>
                        </p>
                    </li> `;
                        })
                        goodbox.innerHTML = html;
                    }else{
                        goodbox.innerHTML = "暂无商品"
                    }
                }
            })
        }

        window.onload =  function(){
            loadallgood()
        }
     </script>
</body>
</html>